<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>货位</title>
	<link rel="stylesheet" href="css/loading.css" />
	<link rel="stylesheet" href="css/querymaterial.css" />
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="系统js/goodsallocation.js"></script>
	<!-- layui-->
	<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>

<body class="layui-layout-body">

<!--顶部搜索栏-->
<div class="search-box">
	<div class="containerbox">
		<div class="div-logo">
			<img src="images/logo1.jpg" style="width: 100%;height: 100%;" />
		</div>
		<div class="input">
			<input type="text" id="autocom" placeholder="请输入要搜索的内容" autocomplete="off" id="search-input">
			<div class="hot-list"></div>
		</div>
		<div class="search" id="basic-addon1"></div>
	</div>
</div>

<!-- 身体部分开始 -->
<div style="margin-top: 20px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="shenhetable" lay-filter="shenhetable"></table>
	<div id="userBar" style="display: none;">
		<a class="layui-btn layui-btn layui-btn-xs" lay-event="details">查看详情</a>
	</div>
	<!-- 数据表格结束 -->
</div>
<!-- 身体部分结束 -->

<!-- 弹出层开始 -->
<div id="LookDetails" style="display: none;padding: 20px">
	<form class="layui-form" action="" lay-filter="example">
		<div class="layui-form-item">
			<label class="layui-form-label">输入框</label>
			<div class="layui-input-block">
				<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">密码框</label>
			<div class="layui-input-block">
				<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">选择框</label>
			<div class="layui-input-block">
				<select name="interest" lay-filter="aihao">
					<option value=""></option>
					<option value="0">写作</option>
					<option value="1">阅读</option>
					<option value="2">游戏</option>
					<option value="3">音乐</option>
					<option value="4">旅行</option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">复选框</label>
			<div class="layui-input-block">
				<input type="checkbox" name="like[write]" title="写作">
				<input type="checkbox" name="like[read]" title="阅读">
				<input type="checkbox" name="like[daze]" title="发呆">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">开关</label>
			<div class="layui-input-block">
				<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">单选框</label>
			<div class="layui-input-block">
				<input type="radio" name="sex" value="男" title="男" checked="">
				<input type="radio" name="sex" value="女" title="女">
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">文本域</label>
			<div class="layui-input-block">
				<textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
				<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
				<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
			</div>
		</div>
	</form>
</div>
<!-- 弹出层结束 -->

<script src="resources/layui/layui.js"></script>
<script>
	layui.use(['jquery', 'layer', 'form', 'table'], function() {
		var $ = layui.jquery;
		var layer = layui.layer;
		var form = layui.form;
		var table = layui.table;

		//渲染数据表格
		table.render({
			elem: '#shenhetable', //渲染的目标对象

			url: 'js/shenhe.json' //数据接口
			,

			title: '' //数据导出来的标题
			/* ,toolbar:"<div>xxx</div>" */
			,
			defaultToolbar: ['filter', 'print', 'exports', {
				title: '提示',
				layEvent: 'LAYTABLE_TIPS',
				icon: 'layui-icon-tips'
			}]
			/* ,height:300 */
			,
			height: 'full-110',
			done: function(res, curr, count) {
				console.log(res.data)
				//为了避免出现相同床位或者相同性别的患者被合并，所以第一个与第四个合并的列名称改成了容易区分的字段
				var columsName = ['id']; //需要合并的列名称
				var columsIndex = [0]; //需要合并的列索引值
				merge(res.data, columsName, columsIndex);
			},
			totalRow: true //开启合并行
			,
			page: true //是否启用分页
			/*   ,limit:20 //设置每页显示条数 默认为10
              ,limits:[20,40,60,80] */
			,
			text: {
				none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
			},
			cols: [
				[ //列表数据
					{
						field: 'id',
						title: '层号',
						align: 'center',
					}, {
					field: 'expenses_id',
					title: '位置',
					align: 'center',
				}, {
					field: 'reviewer_id',
					title: '编号',
					align: 'center',
				}, {
					field: 'createtime',
					title: '名称',
					align: 'center'
				}, {
					fixed: 'right',
					title: '操作',
					align: 'center',
					toolbar: '#userBar'
				}
				]
			]
		});

		//监听行工具事件
		table.on('tool(shenhetable)', function(obj) {
			switch (obj.event) {
				case 'details':
					openLookDetails();
					break;
			};
		});

		var url;
		var mainIndex;
		//打开弹出层
		function openLookDetails() {
			mainIndex = layer.open({
				type: 1,
				title: '货物详情',
				content: $("#LookDetails"),
				area: ['70%', '90%'],
				success: function(index) {
					//清空表单数据
					/* $("#dataFrm")[0].reset();
                    url = "user/addUser.action"; */
				}
			});
		}

		/**layui合并单元格**/
		function merge(data, columsName, columsIndex) {
			var mergeIndex = 0; //定位需要添加合并属性的行数
			var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
			//循环所有要合并的列
			for (var k = 0; k < columsName.length; k++) {
				var trArr = $(".layui-table-body>.layui-table").find("tr"); //所有行
				//循环表格当前的数据
				for (var i = 1; i < data.length; i++) {
					var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]); //获取当前行的当前列
					var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]); //获取相同列的第一列
					//后一行的值与前一行的值做比较，相同就需要合并
					if (data[i][columsName[k]] === data[i - 1][columsName[k]]) {
						mark += 1;
						//相同列的第一列增加rowspan属性
						tdPreArr.each(function() {
							$(this).attr("rowspan", mark);
						});
						//当前行隐藏
						tdCurArr.each(function() {
							$(this).css("display", "none");
						});
					} else {
						mergeIndex = i;
						mark = 1; //一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
					}
				}
				mergeIndex = 0;
				mark = 1;
			}
			//合并表格数据后，改变固定列的高度
			$(".layui-table-main tr").each(function(index, val) {
				$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
			});
		}
	});
</script>

</body>
</html>
